<template>
  <div class="notification-stack">
    <transition-group name="notification">
      <div
        v-for="notification in notifications"
        :key="notification.id"
        class="notification-item"
        :class="notification.type"
      >
        <div class="notification-content">
          <span class="notification-icon">
            <check-circle-outlined v-if="notification.type === 'success'" />
            <info-circle-outlined v-else-if="notification.type === 'info'" />
            <warning-outlined v-else-if="notification.type === 'warning'" />
            <close-circle-outlined v-else />
          </span>
          <span class="notification-message">{{ notification.message }}</span>
        </div>
        <button class="notification-close" @click="removeNotification(notification.id)">
          <close-outlined />
        </button>
      </div>
    </transition-group>
  </div>
</template>

<script setup>
import { storeToRefs } from 'pinia'
import { useAppStore } from '../stores/app'
import {
  CheckCircleOutlined,
  InfoCircleOutlined,
  WarningOutlined,
  CloseCircleOutlined,
  CloseOutlined
} from '@ant-design/icons-vue'

const appStore = useAppStore()
const { notifications } = storeToRefs(appStore)

const removeNotification = (id) => {
  appStore.removeNotification(id)
}
</script>

<style scoped>
.notification-stack {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 400px;
}

.notification-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-radius: var(--border-radius-base);
  background: #fff;
  box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12),
              0 6px 16px 0 rgba(0, 0, 0, 0.08),
              0 9px 28px 8px rgba(0, 0, 0, 0.05);
  animation: slideIn 0.3s ease;
}

.notification-content {
  display: flex;
  align-items: center;
  gap: 8px;
}

.notification-icon {
  font-size: 16px;
}

.notification-message {
  color: var(--text-color);
}

.notification-close {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--text-color-secondary);
  transition: color 0.3s;
}

.notification-close:hover {
  color: var(--text-color);
}

/* 通知类型样式 */
.notification-item.success {
  border-left: 4px solid var(--success-color);
}

.notification-item.success .notification-icon {
  color: var(--success-color);
}

.notification-item.info {
  border-left: 4px solid var(--info-color);
}

.notification-item.info .notification-icon {
  color: var(--info-color);
}

.notification-item.warning {
  border-left: 4px solid var(--warning-color);
}

.notification-item.warning .notification-icon {
  color: var(--warning-color);
}

.notification-item.error {
  border-left: 4px solid var(--error-color);
}

.notification-item.error .notification-icon {
  color: var(--error-color);
}

/* 暗色主题适配 */
[data-theme='dark'] .notification-item {
  background: #1f1f1f;
}

/* 动画 */
@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.notification-enter-active,
.notification-leave-active {
  transition: all 0.3s ease;
}

.notification-enter-from {
  transform: translateX(100%);
  opacity: 0;
}

.notification-leave-to {
  transform: translateX(100%);
  opacity: 0;
}
</style> 